<template>
	<div class="login-view">
		<div class="login-mask">
			<div class="left">
				<!-- <lottie-player src="./login-anim.json" background="transparent" speed="1" style="width: 60%; height: 60%" direction="1" mode="normal" loop autoplay></lottie-player> -->
			</div>
			<div class="right">
				<a-card hoverable :bordered="false" style="background-color: rgba(255,255,255,0.7);backdrop-filter: blur(50px);">
					<div class="form-wrap">
						<a-space direction="vertical" size="large" style="width: 100%;">
							<a-typography-title :heading="3" style="text-align: center;margin-top: 0;">
								通用后台管理系统
							</a-typography-title>
							<a-form ref="formRef" size="large" class="form" :model="state.form" :label-col-props="{span:0}" @submit="onSubmit()">
								<a-form-item field="userName" :rules="[{ required: true, message: '请输入用户名'}]" :validate-trigger="['change','input']" :wrapper-col-props="{span:24}">
									<a-input v-model="state.form.userName"  placeholder="请输入登录账号" allow-clear>
										<template #prefix>
											<icon-user />
										</template>
									</a-input>
								</a-form-item>
								<a-form-item field="passWord" :rules="[{ required: true, message: '请输入密码'}]" :validate-trigger="['change','input']" :wrapper-col-props="{span:24}">
									<a-input-password v-model="state.form.passWord" placeholder="请输入登录密码" allow-clear>
										<template #prefix>
											<icon-lock />
										</template>
									</a-input-password>
								</a-form-item>
								<a-form-item field="remember" :wrapper-col-props="{span:24}">
									<a-checkbox v-model="state.form.remember">
										保持登录
									</a-checkbox>
								</a-form-item>
								<a-form-item :wrapper-col-props="{span:24}">
									<a-button type="primary" :loading="state.loading" long html-type="submit">登录</a-button>
								</a-form-item>
							</a-form >
						</a-space>
					</div>
				</a-card>
			</div>
		</div>
	</div>
</template>
<script setup lang="ts">
import { reactive, ref } from 'vue';
import { IconUser,IconLock} from "@arco-design/web-vue/es/icon"
import { setToken } from '@/utils/token';
import router from '@/router';
import LoginApi from '@/api/account';

const state=reactive({
	form:{
		userName:'',
		passWord:'',
		remember:false,
	},
	loading:false
})
const formRef=ref(null)
const onSubmit=async ()=>{
	let err=await formRef.value?.validate()
	if(!err){
		console.log("submit",state.form)
		doLogin()
		return true
	}else{
		return false
	}
}
const doLogin=()=>{
	state.loading=true
	let userName=state.form.userName
	let passWord=state.form.passWord
	LoginApi.login({
		userName:userName,
		passWord:passWord
	}).then(res => {
		// let store = useUserStore()
		// store.setUserInfo(res.data.user)

		setToken({
			token:res.data.token,
			remember:state.form.remember,
		})

	}).finally(()=>{
		setTimeout(() => {
			state.loading=false
			router.replace('/')
		}, 500);
	})
}
</script>
<style lang="scss" scoped>
.login-view{
	width: 100vw;
	height: 100vh;
	background-image: url(@/assets/login-bg.jpg);
	background-size: cover;
	background-position: 50% 50%;
	display: flex;
	justify-content: center;
	align-items: center;
	// filter: grayscale(30%);
	.login-mask{
		width: 100%;
		height: 100%;
		min-width: 800px;
		min-height: 600px;
		max-width: 1600px;
		display: flex;
		justify-content: center;
		align-items: center;
		padding: 0 10%;
		.left{
			display: flex;
			justify-content: center;
			align-items: center;
			flex:1;
		}
		.right{
			width: 450px;
			.form-wrap{
				padding: 50px 30px;
			}
		}
	}
}
</style>
